<template>
  <div>
    <h3>组件插槽使用</h3>
    <PartEightPanel>
      <span>我是内容</span>
    </PartEightPanel>
    <PartEightPanel>
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </PartEightPanel>
    <PartEightPanel></PartEightPanel>
    <hr/>

    <h3>具名插槽</h3>
    <PartNinePanel>
      <template v-slot:title>
        <span style="color: green">我是标题</span>
      </template>
      <template v-slot:content>
        <span>我是内容</span>
      </template>
    </PartNinePanel>
    <PartNinePanel>
      <template #title>
        <span style="color: red">我是标题</span>
      </template>
      <template #content>
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </template>
    </PartNinePanel>
    <hr/>

    <h3>作用域插槽</h3>
    <PartTenPanel>
      <!-- 需求: 插槽时, 使用组件内变量 -->
      <!-- scope变量: {row: defaultObj} -->
      <template v-slot="scope">
        <p>{{ scope.row.defaultThree }}</p>
      </template>
    </PartTenPanel>
    <PartTenPanel></PartTenPanel>
    <h3>作用域插槽-使用场景</h3>
    <h3>组件内标签可以随意定义和数据使用</h3>
    <PartElevenPanel :arr="list"></PartElevenPanel>
    <PartElevenPanel :arr="list">
      <!-- scope: {row: obj} -->
      <template v-slot="scope">
        <p style="color: green">{{ scope.row.age }}</p>
      </template>
    </PartElevenPanel>
    <hr/>

    <!--     目标: 创建 "自定义指令", 让输入框自动聚焦-->
    <!--     1. 创建自定义指令-->
    <!--     全局 / 局部-->
    <!--     2. 在标签上使用自定义指令  v-指令名-->
    <!--     注意:-->
    <!--     inserted方法 - 指令所在标签, 被插入到网页上触发(一次)-->
    <!--     update方法 - 指令对应数据/标签更新时, 此方法执行-->
    <h3>自定义指令</h3>
    <label>
      <input type="text" v-gfocus>
    </label>
    <label>
      <input type="text" v-focus>
    </label>
    <p v-color="colorStr">修改文字颜色</p>
  </div>
</template>

<script>
import PartEightPanel from "./PartEightPanel";
import PartNinePanel from "./PartNinePanel";
import PartTenPanel from "./PartTenPanel";
import PartElevenPanel from "./PartElevenPanel";

export default {
  name: "BasicApiEight",
  components: {
    PartEightPanel,
    PartNinePanel,
    PartTenPanel,
    PartElevenPanel
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  },
  data() {
    return {
      colorStr: 'red',
      list: [
        {
          name: "高适",
          age: 18
        },
        {
          name: "骆宾王",
          age: 25
        },
        {
          name: "李绅",
          age: 21
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
